<template>
  <div class="example6-wrapper">

    <!--    <iframe-->
    <!--        src="https://apps.ce.bktencent.com/bk-vision/embed/?uid=3mu6wqHieVcLFhAygQ3R5i&bk_app_id=&bk_app_list=['bk-scut-course']&name=&show_copyright=True&watermark=True&time_readonly=False&show_time=True&show_refresh=True&start_time=now/d&end_time=now/d&preview=False&hide_toolbox=False&hide_filter=False&panels=&refresh=False"-->
    <!--        style="height: 100%;width: 100%;border: 1px solid rgb(220, 222, 229);">-->
    <!--    </iframe>-->


    <div class="fr clearfix mb15">
      <bk-form form-type="inline">
        <bk-form-item label="业务">
          <bk-select
            :disabled="false"
            style="width: 250px;"
            ext-cls="select-custom"
            @change="handleBizChange"
            ext-popover-cls="select-popover-custom"
            searchable>
            <bk-option
              v-for="item in biz_list"
              :key="item.bk_biz_id"
              :id="item.bk_biz_id"
              :name="item.bk_biz_id + '-' + item.bk_biz_name"></bk-option>
          </bk-select>
        </bk-form-item>
        <bk-form-item>
          <bk-button theme="primary" title="查询" @click="searchSet()">查询</bk-button>
        </bk-form-item>
      </bk-form>
    </div>
    <bk-table style="margin-top: 15px;"
              :data="set_list"
              :size="size"
              :pagination="pagination"
              @page-change="handlePageChange">
      <bk-table-column label="集群ID" prop="bk_set_id" />
      <bk-table-column label="集群名称" prop="bk_set_name" />
    </bk-table>

  </div>


</template>

<script>
export default {
  components: {
  },
  data() {
    return {
      size: 'small',
      formData: {
        name: '',
        date: '',
      },
      tableData: [],
      biz_list: [],  // 业务列表
      set_id:null,
      set_list:[],
      biz_id: null,    // 当前选中的业务ID
      isSidesliderShow: false,  // 控制侧边栏的显示
      pagination: {
        current: 1,
        count: 0,
        limit: 10,
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 页面初始化时执行
      this.getBizData();
    },
    async searchSet() {
      // TODO：可选优化项：进行参数校验，比如，部分参数为空的话，弹窗提示
      // eslint-disable-next-line camelcase
      // TODO:添加额外可选参数：主机ID、主机IP
      let query_data = {
        "bk_biz_id":this.biz_id
      }
      console.log('服务查询参数:', query_data);

      // eslint-disable-next-line camelcase
      const service_res = await this.$store.dispatch('example/getSetData', query_data, { fromCache: true });
      this.set_list = service_res.data.info;
      // TODO：参照bk-table组件文档，实现分页操作
    },
    // eslint-disable-next-line camelcase
    async handleBizChange(newValue, oldValue) {
      console.log('切换了业务，业务ID为：',newValue)
      this.biz_id = newValue
    },
    async getBizData() {
      try {
        // 初始化业务列表数据，渲染至select下拉选框
        const res = await this.$store.dispatch('example/getBizData', {}, { fromCache: true });
        this.biz_list = res.data.info;
        // this.tableData = res.data.info;
        // this.pagination.count = res.data.count;
      } catch (e) {
        console.error(e);
      }
    },
    handlePageChange(page) {
      this.pagination.current = page;
    },
    remove(row) {
      const index = this.tableData.indexOf(row);
      if (index !== -1) {
        this.tableData.splice(index, 1);
      }
    },
    reset(row) {
      // eslint-disable-next-line no-param-reassign
      row.status = '创建中';
    },
  },
};
</script>
